<template>
  <el-button @click="showCode" :icon="renderIcon('Code')">
    全部代码
    <el-dialog
        v-model="dialogVisible"
        title="design.js 代码预览"
        width="80%"
        :draggable="true"
        :close-on-press-escape="false"
        :close-on-click-modal="true"
        :destroy-on-close="true"
        :append-to-body="true"
    >
      <YvJsEditor v-model="code" :style="{height: codeEditorHeight}"/>
      <template #footer>
        <el-button type="primary" :icon="renderIcon('Save')" @click="tryLoadCode">保存</el-button>
        <el-button :icon="renderIcon('Times')" @click="()=>this.dialogVisible=false">关闭</el-button>
      </template>
    </el-dialog>
  </el-button>
</template>

<script>
import _ from 'lodash'
import VJsonContext from '../../runtime/VJsonContext'
import Designer from "./designer";
import {nextTick} from "vue";
import YvJsEditor from "../../components/web/base/YvJsEditor.vue"
import {renderIcon} from "../../components/web/webutils"

export default {
  components: {
    YvJsEditor
  },
  emits: ["before-review"],
  props: {
    designer: Designer,
    vcxt: VJsonContext,
  },
  data() {
    return {
      dialogVisible: false,
      codeEditorHeight: window.innerHeight * 0.6 + 'px',
      code: '',
    }
  },
  computed: {},
  methods: {
    renderIcon: renderIcon,
    showCode() {
      let fileContent = _.trim(this.vcxt.designer.exportFile())
      this.code = fileContent
      this.dialogVisible = true
    },
    tryLoadCode() {
      this.designer.loadFormFile(this.code)
      nextTick(() => {
        system.msg('导入成功')
        this.dialogVisible = false
      })
    }
  }
}
</script>